@import 'reset';

// 1 rem = fontSize px;
// 1 px = (1 / fontSize) rem

// 定义 fontSize 默认为 37.5
// 这里有疑惑，不知道为什么要敌营默认的fontSize
// 在 app.vue中已经动态设置了 fontSize , 
// 试过将下面的代码注释后, 效果仍不变
$fontSize: 37.5;
@function px2rem($px) {
    @return ($px / $fontSize) + rem;
}

// @mixin 指令允许我们定义一个
// 可以在整个样式表中重复使用的样式

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 这里给全局的 icon 定义一个公共样式
.icon {
    color: #333;
    font-size: px2rem(20);
}

// 这是 导航栏的过度动画css
.slide-down-enter, .slide-down-leave-to{
    transform: translate3d(0, -100%, 0);
}

.slide-down-enter-to, .slide-down-leave,
.slide-up-enter-to, .slide-up-leave {
    transform: translate3d(0, 0, 0);
}

.slide-down-enter-active, .slide-down-leave-active,
.slide-up-enter-active, .slide-up-leave-active{
    transition: all .3s linear;
}

.slide-up-enter, .slide-up-leave-to{
    transform: translate3d(0, 100%, 0);
}
